<template>

    <div class="feed-back">
        <el-tabs style="width: 60%;margin: 0 auto" type="border-card" v-model="active">
            <el-tab-pane label="用户反馈调查问卷" name="first">
                <div class="top-img">
                    <img src="../../assets/suggest.png" alt="">
                </div>
                <div class="one-check">
                    <p>1. <span style="font-size:15px;">请问您想对哪方面提出建议？</span></p>
                    <el-checkbox-group v-model="checkList">
                        <el-checkbox label="商家个人中心"></el-checkbox>
                        <el-checkbox label="发布任务"></el-checkbox>
                        <el-checkbox label="买手做任务流程规范"></el-checkbox>
                        <el-checkbox label="网站首页/列表页等页面"></el-checkbox>
                        <el-checkbox label="任务发布和展示问题"></el-checkbox>
                        <el-checkbox label="增值服务"></el-checkbox>
                        <el-checkbox label="任务返款"></el-checkbox>
                        <el-checkbox label="客服服务"></el-checkbox>
                        <el-checkbox label="其他"></el-checkbox>
                    </el-checkbox-group>
                </div>

                <div class="two-suggest">
                    <p><span>2.</span><span
                            style="font-size:15px;">请详细描述一下您遇到的问题或您对我们的建议。 </span><span>（若您的建议被平台采纳，将获得<span
                            style="color: #f00;">200-1000萌点</span>的奖励）</span></p>
                    <p><span style="opacity:0;">2.</span>我们非常愿意听到您对我们的意见建议！（不少于10字）</p>
                    <div>
                        <p style="font-size:16px;margin-bottom:5px;">建议：</p>
                        <el-input type="textarea" rows="5" resize="none" v-model="suggest" placeholder="请填写"></el-input>
                    </div>
                </div>

                <div class="imgup">
                    <p>如果用图片来说明问题，请上传（若无，可不上传）</p>
                    <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            v-model="filelist"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" style="max-height:500px" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>


                <div class="submit">
                    <el-button style="width: 180px;font-size:18px;" type="primary">提交问卷</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="我的反馈" name="second">
                <div class="my-back">
                    <ul>
                        <li v-for="item in myBackList"></li>
                    </ul>
                </div>
            </el-tab-pane>
        </el-tabs>


    </div>

</template>


<script>


    export default {
        data() {
            return {
                active: 'first',
                checkList: [],
                suggest: '2',
                filelist: [],
                dialogVisible: false,
                dialogImageUrl: '',
                myBackList: [],
            }
        },
        created() {

        },
        mounted() {

        },
        computed: {},
        methods: {
            handlePictureCardPreview(file) {
                this.dialogVisible = true
                this.dialogImageUrl = file.url
            },
            handleRemove(file, fileList) {
                this.filelist = fileList
                console.log(fileList)
            }
        }
    }

</script>


<style lang="scss">

    .feed-back {
        .top-img {
            width: 100%;
            img {
                width: 100%;
                border-radius: 0;
            }
        }
        .one-check {
            .el-checkbox {
                margin-left: 0;
                margin-right: 30px;
                margin-bottom: 10px;
                .el-checkbox__inner {
                    border-color: #a9aaad;
                }
                &.is-checked {
                    .el-checkbox__inner {
                        border-color: transparent;
                    }

                }
                .el-checkbox__label {
                    color: #333;
                }
            }
            margin-bottom: 25px;
        }
        .two-suggest {
            .el-textarea__inner {
                border: 1px solid #aaafba;
            }
        }
        .imgup {
            .el-upload--picture-card {
                width: 120px;
                height: 120px;
                line-height: 128px;
            }
            .el-upload-list--picture-card .el-upload-list__item {
                width: 120px;
                height: 120px;
            }
            .el-icon-close-tip {
                display: none !important;
            }
        }
        .submit {
            text-align: center;
            padding: 35px 0 20px 0;

        }

        .my-back {
            min-height: 200px;
        }
    }

</style>
